<template>
  <PageTable
    :search-options="options"
    :columns="columns.filter(({ checked }) => checked)"
    :data-source="sourceData"
    :loading="spinning"
    :row-selection="{
      selectedRowKeys,
      getCheckboxProps: ({ admin }) => ({ disabled: admin }),
      onChange: setSelectedRowKeys
    }"
    :pagination="{
      current: pagination.pageNum,
      pageSize: pagination.pageSize,
      total: pagination.total,
      onChange: onPageChange
    }"
    @search="onSearchData"
  >
    <template #searchCollapse>
      <AForm layout="inline" ref="formRef" :model="formState" @finish="onSearchData" @reset="onReset">
        <AFormItem label="角色名称" name="roleName">
          <AInput v-model:value="formState.roleName" placeholder="请输入角色名称"></AInput>
        </AFormItem>
        <AFormItem label="角色标识" name="roleKey">
          <AInput v-model:value="formState.roleKey" placeholder="请输入角色标识"></AInput>
        </AFormItem>
        <AFormItem>
          <ASpace>
            <AButton html-type="reset">重置</AButton>
            <AButton type="primary" html-type="submit">搜索</AButton>
          </ASpace>
        </AFormItem>
      </AForm>
    </template>
    <template #operate>
      <ASpace>
        <AButton type="primary" ghost :icon="createVNode(PlusOutlined)" @click="() => setOpenAddModal(true)">
          添加
        </AButton>
        <APopconfirm
          title="您确定批量删除数据吗?"
          ok-text="是"
          cancel-text="否"
          @confirm="() => onDelete(selectedRowKeys)"
        >
          <AButton danger ghost :icon="createVNode(DeleteOutlined)" :disabled="!selectedRowKeys.length">删除</AButton>
        </APopconfirm>
      </ASpace>
      <ASpace>
        <ATooltip title="刷新列表">
          <AButton :icon="createVNode(ReloadOutlined)" :disabled="!!timer" @click="onRefreshData">
            {{ timer || '' }}
          </AButton>
        </ATooltip>
        <ATooltip title="导出角色">
          <RouterLink to="/system/user/export">
            <AButton :icon="createVNode(ExportOutlined)"></AButton>
          </RouterLink>
        </ATooltip>
        <RDropdownCheckbox
          placement="bottomRight"
          v-model:value="columns"
          :fieldNames="{ label: 'title', value: 'key', checked: 'checked' }"
        >
          <AButton :icon="createVNode(AppstoreOutlined)"></AButton>
        </RDropdownCheckbox>
      </ASpace>
    </template>
    <template #bodyActionCell="{ record }">
      <template v-if="record?.admin === false">
        <AButton type="link" size="small" :icon="createVNode(SafetyOutlined)" @click="() => onOpenAuthModal(record)">
          授权
        </AButton>
        <AButton type="link" size="small" :icon="createVNode(EditOutlined)" @click="() => onOpenEditModal(record)">
          编辑
        </AButton>
        <APopconfirm
          title="您确定删除该数据吗?"
          ok-text="是"
          cancel-text="否"
          @confirm="() => onDelete([record.roleId])"
        >
          <AButton type="link" danger size="small" :icon="createVNode(DeleteOutlined)">删除</AButton>
        </APopconfirm>
      </template>
    </template>
  </PageTable>
  <AddRole :open="openAddModal" @finish="onAddRole" @cancel="() => setOpenAddModal(false)"></AddRole>
  <EditRole
    :roleId="roleData?.roleId"
    :open="openEditModal"
    @finish="onEditRole"
    @cancel="() => setOpenEditModal(false)"
  ></EditRole>
  <AuthRole :roleData="roleData" :open="openAuthModal" @close="() => setOpenAuthModal(false)"></AuthRole>
</template>

<script setup>
import { createVNode, ref, reactive, toValue, onBeforeMount } from 'vue';
import { AddRole, EditRole, AuthRole } from './modules';
import { PageTable } from '@/components/templates';
import { RDropdownCheckbox } from '@/components/custom';

import {
  PlusOutlined,
  SafetyOutlined,
  EditOutlined,
  DeleteOutlined,
  ExportOutlined,
  AppstoreOutlined,
  ReloadOutlined
} from '@ant-design/icons-vue';
import { useState, useFetchPageData } from '@/hooks';
import { fetchGetRoleList, fetchAddRole, fetchUpdateRole, fetchDeleteRole } from '@/api/system/role';

const options = [
  { label: '综合搜索', value: 'keyword', placeholder: '综合搜索' },
  { label: '角色名称', value: 'roleName', placeholder: '请输入角色名称' }
];

const defaultColumns = [
  { key: 'index', title: '序号', dataIndex: 'index', checked: true },
  { key: 'roleName', title: '角色名称', dataIndex: 'roleName', checked: true },
  { key: 'roleKey', title: '角色标识', dataIndex: 'roleKey', checked: true },
  { key: 'statusName', title: '状态名称', dataIndex: 'statusName', checked: true },
  { key: 'createTime', title: '创建时间', dataIndex: 'createTime', checked: true },
  { key: 'action', title: '操作', checked: true }
];
const columns = ref(defaultColumns);

const initValues = { roleName: '', roleKey: '' };
const formRef = ref();
const formState = reactive(initValues);
const [openAddModal, setOpenAddModal] = useState(false);
const [roleData, setRoleData] = useState({});
const [openEditModal, setOpenEditModal] = useState(false);
const [openAuthModal, setOpenAuthModal] = useState(false);

const [selectedRowKeys, setSelectedRowKeys] = useState([]);
const {
  sourceData,
  spinning: spinning,
  pagination,
  timer,
  onFetchData,
  onSearchData,
  onPageChange,
  onResetData,
  onRefreshData
} = useFetchPageData(fetchGetRoleList);

onBeforeMount(() => {
  onFetchData();
});

const onOpenEditModal = (record) => {
  setRoleData(record);
  setOpenEditModal(true);
};

const onOpenAuthModal = (record) => {
  setRoleData(record);
  setOpenAuthModal(true);
};

const onReset = () => {
  onResetData();
  toValue(formRef).resetFields();
};

const onAddRole = async (values) => {
  await fetchAddRole(values);
  setOpenAddModal(false);
  onRefreshData(true);
};

const onEditRole = async (values) => {
  await fetchUpdateRole(values);
  setOpenEditModal(false);
  setRoleData(null);
  onRefreshData(true);
};

const onDelete = async (values) => {
  await fetchDeleteRole(values);
  onRefreshData(true);
};
</script>

<style lang="scss" scoped></style>
